@extends('layouts.default')
@section('main')
    <link rel="stylesheet" href="/css/uniform.css" />
    <link rel="stylesheet" href="/css/select2.css" />
    <script src="{{URL::asset('js/My97DatePicker/')}}/WdatePicker.js"></script>
    <script type="text/javascript" src="{{URL::asset('js/')}}/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="{{URL::asset('js/')}}/hightcharts/highcharts.js"></script>
    <script>
        //初始函数，设置定时器，定时取数据
        $(function () {
            queryData();
        });

        //图表属性，不包含数据
        var dayPubOptions = {
            chart: {
                renderTo:'dayPubCon',
                type:'spline'
            },
            title: {
                text: '文章日发布数据统计',
                x: -20 //center
            },
            xAxis:{

            },
            yAxis: {
                title: {
                    text: '日发布篇数'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            series: [{
                name:'发布'
            }],
            tooltip: {
                valueSuffix: '个'
            },
            plotOptions: {
                spline:{
                    dataLabels: {
                        enabled: true
                    },
                    animation:false
                }
            }
        };

        var weekPubOptions = {
            chart: {
                renderTo:'weekPubCon',
                type:'spline'
            },
            title: {
                text: '文章周发布数据统计',
                x: -20 //center
            },
            xAxis:{

            },
            yAxis: {
                title: {
                    text: '周发布篇数'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            series: [{
                name:'发布'
            }],
            tooltip: {
                valueSuffix: '个'
            },
            plotOptions: {
                spline:{
                    dataLabels: {
                        enabled: true
                    },
                    animation:false
                }
            }
        };

        var monthPubOptions = {
            chart: {
                renderTo:'monthPubCon',
                type:'spline'
            },
            title: {
                text: '文章月数据统计',
                x: -20 //center
            },
            xAxis:{

            },
            yAxis: {
                title: {
                    text: '月发布篇数'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            series: [{
                name:'发布'
            }],
            tooltip: {
                valueSuffix: '个'
            },
            plotOptions: {
                spline:{
                    dataLabels: {
                        enabled: true
                    },
                    animation:false
                }
            }
        };

        var dayClickOptions = {
            chart: {
                renderTo:'dayClickCon',
                type:'spline'
            },
            title: {
                text: '文章总日点击数据统计',
                x: -20 //center
            },
            xAxis:{

            },
            yAxis: {
                title: {
                    text: '日总点击数'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            series: [{
                name:'总点击数'
            }],
            tooltip: {
                valueSuffix: '次'
            },
            plotOptions: {
                spline:{
                    dataLabels: {
                        enabled: true
                    },
                    animation:false
                }
            }
        };

        var dayPubCategories = [];
        var dayPubDatas = [];

        var weekPubCategories = [];
        var weekPubDatas = [];

        var monthPubCategories = [];
        var monthPubDatas = [];

        var dayClickCategories = [];
        var dayClickDatas = [];

        //Ajax 获取数据并解析创建Highcharts图表
        function queryData() {
            $.ajax({
                url:'/articlestatistic/day-pub',
                dataType:"json",
                success:function(data) {
                    $.each(data,function(i,n){
                        dayPubCategories[i] = n[0];
                        dayPubDatas[i] = n[1]*1;
                    });
                    dayPubOptions.xAxis.categories = dayPubCategories;
                    dayPubOptions.series[0].data = dayPubDatas;
                    chart = new Highcharts.Chart(dayPubOptions);
                }
            });

            $.ajax({
                url:'/articlestatistic/week-pub',
                dataType:"json",
                success:function(data) {
                    $.each(data,function(i,n){
                        weekPubCategories[i] = n[0];
                        weekPubDatas[i] = n[1]*1;
                    });
                    weekPubOptions.xAxis.categories = weekPubCategories;
                    weekPubOptions.series[0].data = weekPubDatas;
                    chart = new Highcharts.Chart(weekPubOptions);
                }
            });

            $.ajax({
                url:'/articlestatistic/month-pub',
                dataType:"json",
                success:function(data) {
                    $.each(data,function(i,n){
                        monthPubCategories[i] = n[0];
                        monthPubDatas[i] = n[1]*1;
                    });
                    monthPubOptions.xAxis.categories = monthPubCategories;
                    monthPubOptions.series[0].data = monthPubDatas;
                    chart = new Highcharts.Chart(monthPubOptions);
                }
            });

            $.ajax({
                url:'/articlestatistic/day-click',
                dataType:"json",
                success:function(data) {
                    $.each(data,function(i,n){
                        dayClickCategories[i] = n[0];
                        dayClickDatas[i] = n[1]*1;
                    });
                    dayClickOptions.xAxis.categories = dayClickCategories;
                    dayClickOptions.series[0].data = dayClickDatas;
                    chart = new Highcharts.Chart(dayClickOptions);
                }
            });
        }

    </script>
    <div id="content">
        <div id="content-header">
            <div id="breadcrumb">
                <a href="{{url('home')}}" title="返回首页" class="tip-bottom"><i class="icon-home"></i> 首页</a>
            </div>
        </div>
        <div class="container-fluid">
            <div class="widget-title">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab1">发布数</a></li>
                    <li><a data-toggle="tab" href="#tab2">文章总点击量</a></li>
                    <li><a data-toggle="tab" href="#tab3">数据表</a></li>
                </ul>
            </div>
            <div class="widget-content tab-content">
                <div id="tab1" class="tab-pane active">
                    <div>
                        <p>
                            <button class="btn tip-top" id="dayPub">日</button>
                            <button class="btn tip-left" id="weekPub">周</button>
                            <button class="btn tip-right" id="monthPub">月</button>
                        </p>
                        <div id="dayPubCon" style="width: 1100px; height: 400px; margin: 0 "></div>
                        <div id="weekPubCon" style="width: 1100px; height: 400px; margin: 0; display: none; "></div>
                        <div id="monthPubCon" style="width: 1100px; height: 400px; margin: 0; display: none; "></div>
                    </div>
                </div>

                <div id="tab2" class="tab-pane">
                    <div>
                        <p>
                            <button class="btn tip-top" id="dayClick">日</button>
                            {{--<button class="btn tip-left" id="weekClick">周</button>--}}
                            {{--<button class="btn tip-right" id="monthClick">月</button>--}}
                        </p>
                        <div id="dayClickCon" style="width: 1100px; height: 400px; margin: 0 "></div>
                        <div id="weekClickCon" style="width: 1100px; height: 400px; margin: 0; display: none; "></div>
                        <div id="monthClickCon" style="width: 1100px; height: 400px; margin: 0; display: none; "></div>
                    </div>
                </div>

                <div id="tab3" class="tab-pane">
                    {{--<table>--}}
                        {{--<tr>--}}
                            {{--<th>--}}
                                {{--总文章数:--}}
                            {{--</th>--}}
                            {{--<th>--}}
                                {{--{{$total}}--}}
                            {{--</th>--}}
                        {{--</tr>--}}
                    {{--</table>--}}


                    <form action="{{url('articlestatistic/export')}}" id="adForm" method="get">
                        <table>
                            <tr>
                                <th>
                                    <label >类型 :</label>
                                </th>
                                <th>
                                    <div class="controls">
                                        <select  name="type"  >
                                            <option value="">请选择</option>
                                            <option value="article">文章</option>
                                        </select>
                                    </div>
                                </th>
                                <th>
                                    <label >开始时间 :</label>
                                </th>
                                <th>
                                    <div class="controls">
                                        <input type="text"  name="begin_time"
                                               placeholder="开始时间" onfocus="WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})" />
                                    </div>
                                </th>
                                <th>
                                    <label >结束时间 :</label>
                                </th>
                                <th>
                                    <div class="controls">
                                        <input type="text"  name="end_time"
                                               placeholder="结束时间" onfocus="WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})" />
                                    </div>
                                </th>
                                <th>
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                    <div class="controls">
                                        <button type="button" name="find" class="btn btn-info">查询</button>
                                        <button type="submit" class="btn btn-info">导出</button>
                                    </div>
                                </th>
                            </tr>
                        </table>
                    </form>

                    <div id="result">
                    </div>
                    <div id="ajaxPage">
                    </div>



                </div>
            </div>
        </div>


    </div>
    <script src="/js/matrix.tables.js"></script>
    <script type="text/javascript" src="{{URL::asset('js/')}}/common.js"></script>

    <script>
        $("#dayPub").click(function(){
            $("#dayPubCon").show();
            $("#weekPubCon").hide();
            $("#monthPubCon").hide();
        });

        $("#weekPub").click(function(){
            $("#dayPubCon").hide();
            $("#weekPubCon").show();
            $("#monthPubCon").hide();
        });

        $("#monthPub").click(function(){
            $("#dayPubCon").hide();
            $("#weekPubCon").hide();
            $("#monthPubCon").show();
        });

        //异步获取
        $('button[name=find]').click(function(){
            ajaxRequest($('#adForm').serializeArray(),"articlestatistic/find",function(data){
                if(data.status){
                    var html='<table class="table table-bordered table-striped">';
                    html+='<thead>';
                    html+='<tr>';
                    html+='<th>id</th>';
                    html+='<th>主题</th>';
                    html+='<th>来源</th>';
                    html+='<th>分类</th>';
                    html+='<th>阅读数</th>';
                    html+='<th>前台是否显示</th>';
                    html+='<th>查看详情</th>';
                    html+='<th>添加时间</th>';
                    html+='</tr>';
                    html+='</thead>';
                    html+='<tbody>';
                    $.each(data.message.list,function(i,e){
                        html+='<tr class="gradeX">';
                        html+='<td>'+e.id+'</td>';
                        html+='<td>'+e.subject+'</td>';
                        html+='<td>'+e.source+'</td>';
                        html+='<td>'+e.category+'</td>';
                        html+='<td>'+e.views+'</td>';
                        html+='<td>'+e.status+'</td>';
                        html+='<td><a href="news/info?id='+e.id+'">点击查看</a></td>';
                        html+='<td>'+e.created_at+'</td>';
                        html+='<tr>';
                    });

                    $("#ajaxPage").html(data.message.page);
                    $("#result").html(html);
                }else{
                    alert(data.message);
                }
            });
        });

        /*
         * 异步分页
         */
        $("body").on('click','#ajaxPage li',function(){
            if(!$(this).hasClass('pagemore')){
                var page = $(this).attr('value');
                var params = {};
                params['page'] = page;
                params['begin_time'] = $("input[name='begin_time']").val();
                params['end_time'] = $('input[name=end_time]').val();
                params['type'] = $('select[name=type').val();
                if(page==0){
                    return false;
                }
                ajaxRequest(params,"articlestatistic/find",function(data){
                    if(data.status){
                        var html='<table class="table table-bordered table-striped">';
                        html+='<thead>';
                        html+='<tr>';
                        html+='<th>id</th>';
                        html+='<th>主题</th>';
                        html+='<th>来源</th>';
                        html+='<th>分类</th>';
                        html+='<th>阅读数</th>';
                        html+='<th>前台是否显示</th>';
                        html+='<th>查看详情</th>';
                        html+='<th>添加时间</th>';
                        html+='</tr>';
                        html+='</thead>';
                        html+='<tbody>';
                        $.each(data.message.list,function(i,e){
                            html+='<tr class="gradeX">';
                            html+='<td>'+e.id+'</td>';
                            html+='<td>'+e.subject+'</td>';
                            html+='<td>'+e.source+'</td>';
                            html+='<td>'+e.category+'</td>';
                            html+='<td>'+e.views+'</td>';
                            html+='<td>'+e.status+'</td>';
                            html+='<td><a href="news/info?id='+e.id+'">点击查看</a></td>';
                            html+='<td>'+e.created_at+'</td>';

                            html+='<tr>';
                        })

                        $("#ajaxPage").html(data.message.page);
                        $("#result").html(html);
                    }else{
                        alert(data.message);
                    }
                });
            }
        });


        //跳转分页
        $("#ajaxPage").on('click','.ajaxPagegoto',function(){
            var page = $(".page-num").val();
            var params = {};
            params['page'] = page;
            params['begin_time'] = $('input[name=begin_time]').val();
            params['end_time'] = $('input[name=end_time]').val();
            params['type'] = $('select[name=type').val();
            if(page == undefined){
                showMessage("error",'请输入正确的跳转页数');
            }else{
                var lastpage = $("#ajaxPage .lastpage").attr('value');
                if(parseInt(page)>parseInt(lastpage)){
                    page = lastpage;
                }
                ajaxRequest(params,'articlestatistic/find',function(data){
                    if(data.status){
                        var html='<table class="table table-bordered table-striped">';
                        html+='<thead>';
                        html+='<tr>';
                        html+='<th>id</th>';
                        html+='<th>主题</th>';
                        html+='<th>来源</th>';
                        html+='<th>分类</th>';
                        html+='<th>阅读数</th>';
                        html+='<th>前台是否显示</th>';
                        html+='<th>查看详情</th>';
                        html+='<th>添加时间</th>';
                        html+='</tr>';
                        html+='</thead>';
                        html+='<tbody>';
                        $.each(data.message.list,function(i,e){
                            html+='<tr class="gradeX">';
                            html+='<td>'+e.id+'</td>';
                            html+='<td>'+e.subject+'</td>';
                            html+='<td>'+e.source+'</td>';
                            html+='<td>'+e.category+'</td>';
                            html+='<td>'+e.views+'</td>';
                            html+='<td>'+e.status+'</td>';
                            html+='<td><a href="news/info?id='+e.id+'">点击查看</a></td>';
                            html+='<td>'+e.created_at+'</td>';
                            html+='<tr>';
                        })

                        $("#ajaxPage").html(data.message.page);
                        $("#result").html(html);
                    }else{
                        alert(data.message);
                    }
                });
            }
        });

    </script>

@stop
